<template>
  <div class="usersetting">
    <p>* 以下设置会自动保存</p>
    <ul>
      <li>
        <span> 界面灰度设置 </span>
        <input
          class="filter"
          @change="numberChange"
          type="range"
          v-model="ruleForm.number"
          :max="1"
          min="0.01"
          step="0.01"
        />
      </li>

      <li>
        <span> 年级显示 </span>
        <el-checkbox-group
          v-model="ruleForm.test_gradelist"
          @change="checklistChange"
        >
          <el-checkbox label="0">
            <span> 学前教育 </span>
          </el-checkbox>
          <el-checkbox label="1">
            <span> 一年级 </span>
          </el-checkbox>
          <el-checkbox label="2">
            <span> 二年级 </span>
          </el-checkbox>
          <el-checkbox label="3">
            <span> 三年级 </span>
          </el-checkbox>
          <el-checkbox label="4">
            <span> 四年级 </span>
          </el-checkbox>
          <el-checkbox label="5">
            <span> 五年级 </span>
          </el-checkbox>
          <el-checkbox label="6">
            <span> 六年级 </span>
          </el-checkbox>
          <el-checkbox label="7">
            <span> 七年级 </span>
          </el-checkbox>
          <el-checkbox label="8">
            <span> 八年级 </span>
          </el-checkbox>
          <el-checkbox label="9">
            <span> 九年级 </span>
          </el-checkbox>
          <el-checkbox label="10">
            <span> 高一 </span>
          </el-checkbox>
          <el-checkbox label="11">
            <span> 高二 </span>
          </el-checkbox>
          <el-checkbox label="12">
            <span> 高三 </span>
          </el-checkbox>
        </el-checkbox-group>
      </li>
      <li>
        <span> 科目显示 </span>
        <el-checkbox-group
          v-model="ruleForm.test_projectlist"
          @change="projectlistChange"
        >
          <el-checkbox label="1">
            <span> 语文 </span>
          </el-checkbox>
          <el-checkbox label="2">
            <span> 数学 </span>
          </el-checkbox>
          <el-checkbox label="3">
            <span> 英语 </span>
          </el-checkbox>
          <el-checkbox label="4">
            <span> 政治 </span>
          </el-checkbox>
          <el-checkbox label="5">
            <span> 历史 </span>
          </el-checkbox>
          <el-checkbox label="6">
            <span> 地理 </span>
          </el-checkbox>
          <el-checkbox label="7">
            <span> 物理 </span>
          </el-checkbox>
          <el-checkbox label="8">
            <span> 化学 </span>
          </el-checkbox>
          <el-checkbox label="9">
            <span> 生物 </span>
          </el-checkbox>
        </el-checkbox-group>
      </li>

      <li>
        <span> 考试类型显示 </span>
        <el-checkbox-group
          v-model="ruleForm.test_typelist"
          @change="typelistChange"
        >
          <el-checkbox label="1">
            <span> 日常测试 </span>
          </el-checkbox>
          <el-checkbox label="2">
            <span> 周测 </span>
          </el-checkbox>
          <el-checkbox label="3">
            <span> 月测 </span>
          </el-checkbox>
        </el-checkbox-group>
      </li>

      <li>
        <span> 轻音乐播放 </span>
        <el-switch
          @change="showChange"
          v-model="ruleForm.switch"
          active-color="#409EFF"
          inactive-color="#ddd"
        >
        </el-switch>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {},
      ruleForm: {
        number: 1,
        test_gradelist: [],
        test_projectlist: [],
        test_typelist: [],
        switch: false,
      },
    };
  },

  created() {
    this.user = JSON.parse(sessionStorage.getItem("user"));
     //初始化轻音乐的播放
    this.ruleForm.switch=this.user.user_music_isplay

    //初始化界面灰度设置
    this.ruleForm.number = 1 - this.user.flutter_number;

    //初始化 年级的基本数据
    let datalist = this.user.user_grade_arr;
    let arr = [];
    for (let i = 0; i < datalist.length; i++) {
      arr.push(datalist[i].value + "");
    }
    this.ruleForm.test_gradelist = arr;

    //初始化 科目 考试类型的基本数据
    let datalist1 = this.user.user_project_arr;
    let arr1 = [];
    let arr2 = [];
    for (let i = 0; i < datalist1.length; i++) {
      arr1.push(datalist1[i].value + "");
    }
    for (let i = 0; i < datalist1[0].children.length; i++) {
      arr2.push(datalist1[0].children[i].value);
    }
    this.ruleForm.test_projectlist = arr1;
    this.ruleForm.test_typelist = arr2;

   
  },
  methods: {
    //监控轻音乐播放
    async showChange() {
      // console.log(this.ruleForm.switch)
      let data = await this.$http.post("userCenter/getisShow", {
        _id: this.user._id,
        user_music_isplay: this.ruleForm.switch,
      });
      if (data.status == 200) {
        // console.log(data.data.datalist)
        sessionStorage.setItem("user", JSON.stringify(data.data.datalist));
        this.$store.commit("setShowData", this.ruleForm.switch);
        this.$store.commit("setMnumberData")
        if(this.ruleForm.switch){
          this.$router.go(0)
        }
      
        // this.$message.success(data.data.message);
      } else {
        this.$message.error(data.data.message);
      }
    },
    //用户设置需要展示的测试类型
    async typelistChange() {
      let data = await this.$http.post("userCenter/getProjectarr", {
        _id: this.user._id,
        user_project_arr: this.ruleForm.test_projectlist,
        user_type_arr: this.ruleForm.test_typelist,
      });
      if (data.status == 200) {
        // console.log(data.data.datalist)
        sessionStorage.setItem("user", JSON.stringify(data.data.datalist));
        this.$message.success(data.data.message);
      } else {
        this.$message.error(data.data.message);
      }
    },

    //设置用户需要展示的科目
    async projectlistChange() {
      let data = await this.$http.post("userCenter/getProjectarr", {
        _id: this.user._id,
        user_project_arr: this.ruleForm.test_projectlist,
        user_type_arr: this.ruleForm.test_typelist,
      });
      if (data.status == 200) {
        // console.log(data.data.datalist)
        sessionStorage.setItem("user", JSON.stringify(data.data.datalist));
        this.$message.success(data.data.message);
      } else {
        this.$message.error(data.data.message);
      }
    },

    //设置用户的显示年级
    async checklistChange() {
      // console.log(this.ruleForm.test_gradelist)
      let data = await this.$http.post("userCenter/getGardearr", {
        _id: this.user._id,
        user_grade_arr: this.ruleForm.test_gradelist,
      });
      if (data.status == 200) {
        // console.log(data.data.datalist)
        sessionStorage.setItem("user", JSON.stringify(data.data.datalist));
        this.$message.success(data.data.message);
      } else {
        this.$message.error(data.data.message);
      }
    },

    //灰度设置变化时触发
    async numberChange() {
      //本地设置
      this.$store.commit("setNumberData", 1 - this.ruleForm.number);
      this.user.flutter_number = 1 - this.ruleForm.number;
      sessionStorage.setItem("user", JSON.stringify(this.user));
      //上传设置到服务器
      let data = await this.$http.post("userCenter/postFlutter", {
        user_id: this.user._id,
        flutter_number: 1 - this.ruleForm.number,
      });
      if (data.status == 200) {
        this.$message.success(data.data.message);
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.usersetting {
  p {
    height: 50px;
    line-height: 50px;
    text-align: right;
    padding-right: 20px;
    color: #cc2525;
  }
  ul {
    li {
      min-height: 50px;
      display: flex;
      align-items: center;
      span {
        min-width: 120px;
        text-align: right;
        font-size: 14px;
        margin-right: 20px;
        color: #409eff;
      }
      .filter {
        width: 250px;
      }
    }
  }
}
.el-checkbox-group {
  &:nth-of-type(1) {
    .el-checkbox {
      &:nth-of-type(n-8) {
        margin-top: 10px;
      }
    }
  }
}

.el-checkbox__label > span {
  color: #f5f5f5 !important;
  position: relative;
  left: -5px;
}

.el-checkbox {
  margin-right: -5px;
}
</style>